<template>
  <div class="pagination">
    <div class="total">共 {{ total }} 条</div>
    <div class="pagination-btn">
      <div class="pagination-btn-item"  @click="prevPage">上一页</div>
      <div class="pagination-number">
        <div 
          :class="{'active': i === pageIndex}" 
          v-for="(i,index) in getPageNumbers()" 
          :key="index" 
          @click="changePage(i)"
        >{{i}}</div>        
      </div>
      <div class="pagination-btn-item"  @click="nextPage">下一页</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageIndex:{
      type: Number,
      default: 1,
    }
  },
  data(){
    return {
      pageSize: 10,
    }
  },
  computed:{
    totalPage(){
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods:{
    nextPage(){
      if(this.pageIndex >= this.totalPage){
        return;
      }
      this.$emit('update:pageIndex',this.pageIndex + 1); // 通过事件通知父组件更新
    },
    prevPage(){
      if(this.pageIndex <= 1){
        return;
      }
      this.$emit('update:pageIndex', this.pageIndex - 1); // 通过事件通知父组件更新
    },
    changePage(page) {
      if(page === '...'){
        return;
      }
      if (page !== this.pageIndex) {
        this.$emit('update:pageIndex', page); // 通过事件通知父组件更新
      }
    },
    getPageNumbers(){
      const pages = [];
      const visibleCount = 5; // 可见页码数量
      const halfVisible = Math.floor(visibleCount / 2);
      let startPage = Math.max(2, this.pageIndex - halfVisible);
      let endPage = Math.min(this.totalPage - 1, this.pageIndex + halfVisible);

      // 调整起始页码，确保显示足够数量的页码
      if (endPage - startPage + 1 < visibleCount) {
        if (startPage === 2) {
          endPage = Math.min(visibleCount + 1, this.totalPage - 1);
        } else if (endPage === this.totalPage - 1) {
          startPage = Math.max(this.totalPage - visibleCount, 2);
        }
      }

      // 添加首页
      pages.push(1);

      // 添加前省略号
      if (startPage > 2) {
        pages.push('...');
      }

      // 添加中间页码
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }

      // 添加后省略号
      if (endPage < this.totalPage - 1) {
        pages.push('...');
      }

      // 添加末页
      if (this.totalPage > 1) {
        pages.push(this.totalPage);
      }

      return pages;
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
